<template>
  <view class="container">
    
    <!-- 用户信息卡片 -->
    <view class="user-info-card" style="position: relative;">
		<view v-if="!userInfo.is_self"  style="position: absolute; z-index: 888; top: 89rpx;right: 35rpx; " @click="navigateBack">
			<image @click.native.stop="send(0)" style="width: 50rpx;height: 50rpx;" src="/static/love.png"></image>
			
	  </view>
	  <view class="back-btn"  style=" position: absolute; top: 100rpx; left: 30rpx;z-index: 222;" @click="goBack">
	  	<uni-icons type="left" color="#fff" size="20"></uni-icons>
	  </view>
      <view class="cover-image"  :style="`background-image:`+ `url(`+userInfo.user_info.avatar_thumb+`)`">
		
      </view>
	  <!-- 遮罩层 -->
	  <view style="background:  linear-gradient(135deg, #3a4e62, #122432); opacity: 0.6; z-index: 10; position: absolute; width: 100%;height: 540rpx;top: 0;left: 0;"></view>
      <!-- 信息卡片 -->
	  <view>
		  <view @click="imabg" class="change-cover-btn" v-if="userInfo.is_self">
		  	<text>更换背景</text>
		  </view>
		  <view class="avatar-container">
			<view style="display: flex; align-items: center;">
				<view>
					<image class="avatar" :src="userInfo.user_info.avatar"></image>
				</view>
				<view style="margin-left: 30rpx;">
					<view>
					    <view style="font-size: 39rpx;color: #fff;margin-bottom: 20rpx;" >{{ userInfo.user_info.nickname }}</view>
					    <view style="font-size: 24rpx; color: #e8e8e8;">{{ userInfo.user_info.school.school_name }}</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 20rpx;color: #e8e8e8;font-size: 26rpx;">
				{{userInfo.user_info.bio || '暂无设置个人简介~'}}
			</view>
			<view style="margin-top: 35rpx; display: flex; align-items: center; justify-content: space-between;">
				<view style="display: flex;align-items: center; color: #fff;font-size: 25rpx;">
					  <view class="stat-item" style="text-align: center;">
					    <view class="count" style="font-weight: bold;">{{ userInfo.stats.confession_count || 0}}</view>
					    <view style="margin-top: 10rpx;color: #e6e6e6; ">笔记</view>
					  </view>
					  <view class="stat-item" style="text-align: center; margin-left: 35rpx;">
					    <view class="count" style="font-weight: bold;">{{ userInfo.stats.follower_count }}</view>
					    <view style="margin-top: 10rpx;color: #e6e6e6; ">粉丝</view>
					  </view>
					  <view class="stat-item" style="text-align: center;margin-left: 35rpx;">
					    <view class="count" style="font-weight: bold;">{{ userInfo.stats.following_count }}</view>
					    <view style="margin-top: 10rpx;color: #e6e6e6; ">收藏</view>
					  </view>
				</view>
				<view style="display: flex;align-items: center;" v-if="!userInfo.is_self">
					<view @click="changeAvatar"  style="font-size: 24rpx;color: #fff; padding: 8rpx 20rpx;border-radius: 35rpx;background: red;">{{!userInfo.is_following?'收藏':'已收藏'}}</view>
					<!-- <view @click="send(1)" style="border: 1rpx solid #fff;color: #fff; border-radius: 35rpx;padding: 8rpx 20rpx; margin-left: 24rpx;font-size: 24rpx;">私信</view> -->
					<view @click="showLoveLetterModal = true" style="border: 1rpx solid #fff;color: #fff; border-radius: 35rpx;padding: 8rpx 20rpx; margin-left: 24rpx;font-size: 24rpx;">发留言</view>
				</view>
			</view>
		   
		  </view>
	  </view>
    </view>
    
    <!-- 作品集导航 -->
   <view class="portfolio-tabs">
      <text 
        :class="{ active: currentTab === '1' }"
        @click="switchTab('1')"
      >笔记</text>
      <text 
        :class="{ active: currentTab === '2' }"
        @click="switchTab('2')"
      >收藏</text>
      <text 
        :class="{ active: currentTab === '3' }"
        @click="switchTab('3')"
      >点赞</text>
      
    </view>
    
    <!-- 作品集网格 -->
    <view class="portfolio-grid" v-if="currentTab == '1'">
      <view class="portfolio-item"  v-for="(item, index) in filteredPortfolio" :key="index" @click="viewPortfolio(item.id)">
        <image class="item-image" :src="JSON.parse(item.images)[0].url"></image>
        <view class="item-info">
          <text class="item-title">{{ item.title }}</text>
          <view class="item-meta">
            <text class="category">{{ item.category }}</text>
			<view style="display: flex;align-items: center;">
				<uni-icons  type="heart" @click.native.stop="likecount(item)" size="18" color="#ff4d6d"></uni-icons>
				<text class="likes">
					{{ item.like_count }} 
				</text>
			</view>
          </view>
        </view>
      </view>
    </view>
	<view class="portfolio-grid" v-if="currentTab == '2'">
	  <view class="portfolio-item"  v-for="(item, index) in filteredPort" :key="index" @click="viewPortfolio(item.id)">
	    <image class="item-image" :src="JSON.parse(item.images)[0].url"></image>
	    <view class="item-info">
	      <text class="item-title">{{ item.title }}</text>
	      <view class="item-meta">
	        <text class="category">{{ item.category }}</text>
			<view style="display: flex;align-items: center;">
				<uni-icons  type="heart" @click.native.stop="likecount(item)" size="18" color="#ff4d6d"></uni-icons>
				<text class="likes">
					{{ item.like_count }} 
				</text>
			</view>
	      </view>
	    </view>
	  </view>
	</view>
	
	<view class="portfolio-grid" v-if="currentTab == '3'">
	  <view class="portfolio-item"  v-for="(item, index) in filtered" :key="index" @click="viewPortfolio(item.id)">
	    <image class="item-image" :src="JSON.parse(item.images)[0].url"></image>
	    <view class="item-info">
	      <text class="item-title">{{ item.title }}</text>
	      <view class="item-meta">
	        <text class="category">{{ item.category }}</text>
			<view style="display: flex;align-items: center;">
				<uni-icons  type="heart" @click.native.stop="likecount(item)" size="18" color="#ff4d6d"></uni-icons>
				<text class="likes">
					{{ item.like_count }} 
				</text>
			</view>
	      </view>
	    </view>
	  </view>
	</view>
    
    <!-- 空状态 filteredPort.length == 0 -->
    <view class="empty-state" v-if="filteredPortfolio.length === 0 && currentTab == '1' ">
      <image src="/static/image/que.png"></image>
      <text>暂无笔记~ </text>
    </view>
	<view class="empty-state" v-if="filteredPort.length === 0 && currentTab == '2' ">
	  <image src="/static/image/que.png"></image>
	  <text>暂无笔记~ </text>
	</view>
	<view class="empty-state" v-if="filtered.length === 0 && currentTab == '3' ">
	  <image src="/static/image/que.png"></image>
	  <text>暂无笔记~ </text>
	</view>
    
   <!-- 情书弹窗 -->
   <view class="love-letter-modal" v-if="showLoveLetterModal">
         <view class="modal-mask" @click="closeLoveLetterModal"></view>
         <view class="modal-content">
           <view class="modal-header">
             <text class="modal-title">写情书</text>
             <image src="/static/close.png" @click="closeLoveLetterModal"></image>
           </view>
           <textarea 
             class="letter-textarea" 
             placeholder="写下你的心意..." 
             v-model="loveLetterContent"
             auto-height
             maxlength="200"
             placeholder-class="placeholder"
           ></textarea>
           <view class="word-count">{{ loveLetterContent.length }}/200</view>
           <view class="modal-footer">
             <button class="cancel-btn" @click="closeLoveLetterModal">取消</button>
             <button class="send-letter-btn" @click="sendLoveLetter">发送情书</button>
           </view>
         </view>
       </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isSelf: true, // 是否是当前用户自己的页面
      isFollowing: false, // 是否关注了该用户
      
      currentTab: '1',
      userInfo: {},
      portfolio: [],
	  showLoveLetterModal:false,
	  loveLetterContent:'',
	  user:uni.getStorageSync('userInfo'),
	  page:1,
	  limit:20,
	  option:{},
	  filteredPort:[],
	  filtered:[],
	  total:0
    };
  },
  computed: {
    filteredPortfolio() {
      if (this.currentTab === '1') {
        return this.portfolio;
      }
      return this.portfolio.filter(item => item.category === this.currentTab);
    }
  },
  onLoad(option) {
	uni.setNavigationBarTitle({
		title:option.nickname
	})
  	this.getUserInfo(option.id)
	console.log('userInfo',this.user)
	this.option = option
	this.getUserConfessions()
  },
  onReachBottom() {
  	if(this.currentTab == '1'){
		if(this.portfolio.length>this.total){
			this.page ++
			this.getUserConfessions()
		}
	}
	if(this.currentTab == '2'){
		if(this.filteredPort.length>this.total){
			this.page ++
			this.getUserConfessions()
		}
	}
  },
  methods: {
	goBack(){
		uni.navigateBack({delta:1})
	},
	  send(i){
		  switch(i){
			  case 0:
				this.showLoveLetterModal = true;
				break;
			default:
				uni.navigateTo({
					url:'/pagesA/message?id='+this.userInfo.user_info.user_id
				})
				break;
		  }
		  
	  },
	  // 发送情书
	  async sendLoveLetter() {
	    if (!this.loveLetterContent.trim()) {
	      uni.showToast({
	        title: '情书内容不能为空',
	        icon: 'none'
	      });
	      return;
	    }
	    const res = await this.$api.post('/LoveLetter/send',{
			receiver_id:this.option.id,content:this.loveLetterContent,
			},true)
		if(res.data.code === 200) {
			uni.showToast({
				icon:'none',
				title:'发送成功~'
			})
			this.showLoveLetterModal = false;
			this.loveLetterContent = "";
		}
	    const newMsg = {
	      id: `mymsg${this.myMessageList.length + 1}`,
	      type: "love-letter",
	      content: this.loveLetterContent,
	      time: this.getCurrentTime()
	    };
	    
	    this.myMessageList.push(newMsg);
	    this.scrollToMsgId = newMsg.id;
	    this.showLoveLetterModal = false;
	    this.loveLetterContent = "";
	    
	    // 模拟对方收到情书的回复
	    setTimeout(() => {
	      const replyMsg = {
	        id: `msg${this.messageList.length + 1}`,
	        type: "text",
	        content: "我收到你的情书了...好感动❤️",
	        time: this.getCurrentTime()
	      };
	      this.messageList.push(replyMsg);
	      this.scrollToMsgId = replyMsg.id;
	    }, 2000);
	  },
	  async getUserInfo(id){
		const res = await this.$api.get('/user/get',{id:id},true)
		if(res.data.code == 200){
			this.userInfo = res.data.data
		}
	  },
	  async getUserConfessions(id){
		    const params = {
				page:this.page,
				limit:this.limit,
				userId:this.option.id,
				type:this.currentTab
			}
	  		const res = await this.$api.get('/user/userConfessions',params,true)
	  		if(res.data.code == 200){
	  			console.log('大大大大',res.data.data)
				// if(res.data.data.list.length)
				this.total = res.data.data.pagination.total
				if(this.currentTab == '1' ) {
					this.portfolio = res.data.data.list
					if( this.portfolio.length > res.data.data.pagination.total){
						this.portfolio = this.portfolio.concat(res.data.data.list) 
					} else {
						this.portfolio = res.data.data.list
					}
					
				} else if(this.currentTab == '2'){
					this.filteredPort = res.data.data.list
					if( this.filteredPort.length > res.data.data.pagination.total){
						this.filteredPort = this.filteredPort.concat(res.data.data.list) 
					} else {
						this.filteredPort = res.data.data.list
					}
				} else {
					this.filtered = res.data.data.list
					if( this.filtered.length > res.data.data.pagination.total){
						this.filtered = this.filtered.concat(res.data.data.list) 
					} else {
						this.filtered = res.data.data.list
					}
				}
				
	  		}
	  },
	  // 关闭情书对话框
	  closeLoveLetterModal() {
	    this.showLoveLetterModal = false;
	    this.loveLetterContent = "";
	  },
	 imabg(){
		uni.chooseImage({
		  count: 1,
		  success:  (res)  => {
		    const tempFilePaths = res.tempFilePaths;
			this.$api.uploadFile('/upload/File',tempFilePaths[0]).then(res => {
			this.userInfo.user_info.avatar_thumb = res.url;
			    this.$api.post('/user/updateInfo',{avatar_thumb:res.url},true)
				this.getUserInfo(this.option.id)
			  })
		  }
		});
	},
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },

    // 切换作品集标签
    switchTab(tab) {
      this.currentTab = tab;
	  this.getUserConfessions()
    },
    
    // 查看作品集详情
    viewPortfolio(id) {
      uni.navigateTo({
        url: `/pages/index/noteDetail?id=${id}`
      });
    },
    

    
    // 关注
    async changeAvatar() {
		this.userInfo.is_following != this.userInfo.is_following
		const res = await this.$api.post('/user/toggleFollow',{targetId:this.userInfo.user_info.user_id},true)
		if(res.data.code === 200) {
			this.getUserInfo(this.option.id)
		}
    },
    
    
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  padding-bottom: 30rpx;
}

.header {
  height: 120rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .back-btn {
    width: 40rpx;
    height: 40rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
  
  .edit-btn {
    font-size: 28rpx;
    color: #ff6600;
  }
}
.back-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
  
  .cover-image {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
	
    &:hover {
      transform: scale(1.02);
    }
  }
  
  .change-cover-btn {
	z-index: 888;
    position: absolute;
    top: 200rpx;
    right: 30rpx;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 30rpx;
    padding: 8rpx 20rpx;
    backdrop-filter: blur(10rpx);
    
    image {
      width: 28rpx;
      height: 28rpx;
      margin-right: 8rpx;
    }
    
    text {
      color: #ffffff;
      font-size: 24rpx;
    }
  }
  .avatar-container {
    position: absolute;
	top: 195rpx;
    left: 5%;
	width: 90%;
    z-index: 100;
    
    .avatar {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      border: 2rpx solid #fff;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    }
    
    .edit-avatar {
      position: absolute;
      bottom: 57.5%;
      right: 46.5%;
      width: 48rpx;
      height: 48rpx;
      background-color: #ff6600;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      image {
        width: 38rpx;
        height: 38rpx;
      }
    }
  }
.user-info-card {
  background-color: #fff;
  margin-bottom: 24rpx;
  
  .cover-image {
    height: 540rpx;
    position: relative;
    
    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    
  }
  
  .user-info {
    padding: 50rpx 30rpx 30rpx;
    text-align: center;
	width: 580rpx;
    z-index: 99;
    .name-and-follow {
      display: flex;
      align-items: center;
      justify-content: center;
	 
      .name {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-right: 24rpx;
      }
      
      .school {
        font-size: 24rpx;
        color: #666;
        padding: 6rpx 16rpx;
        background-color: #f5f5f5;
        border-radius: 20rpx;
      }
      
      .follow-btn {
        margin-left: 24rpx;
        background-color: #ff6600;
        color: #fff;
        font-size: 28rpx;
        padding: 10rpx 24rpx;
        border-radius: 32rpx;
      }
    }
    
    .signature {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 32rpx;
      display: block;
	  z-index: 999;
    }
    
    .stats {
      display: flex;
      justify-content: center;
      
      .stat-item {
        margin: 0 40rpx;
        
        .count {
          display: block;
          font-size: 36rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .label {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
}

.portfolio-tabs {
  display: flex;
  background-color: #fff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  
  text {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding-bottom: 16rpx;
    position: relative;
    
    &.active {
      color: #ff6600;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background-color: #ff6600;
        border-radius: 2rpx;
      }
    }
  }
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  padding: 0 24rpx;
}

.portfolio-item {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .item-image {
    width: 100%;
    height: 300rpx;
    object-fit: cover;
  }
  
  .item-info {
    padding: 20rpx;
    
    .item-title {
      display: block;
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 12rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .item-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .category {
        font-size: 24rpx;
        color: #666;
      }
      
      .likes {
        font-size: 24rpx;
        color: #999;
        display: flex;
        align-items: center;
        
        image {
          width: 24rpx;
          height: 24rpx;
          margin-left: 8rpx;
        }
      }
    }
  }
}

.empty-state {
  padding: 100rpx 30rpx;
  text-align: center;
  
  image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 32rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #999;
    display: block;
    margin-bottom: 40rpx;
  }
  
  .upload-btn {
    background-color: #ff6600;
    color: #fff;
    font-size: 28rpx;
    padding: 16rpx 48rpx;
    border-radius: 40rpx;
  }
}


</style>